<template>
	<!-- 外卖-订单详情 -->
	<view class="orderDetails public">
		<view class="empty"></view>
		<view class="main">
			<!-- 上部分 -->
			<view class="header">
				<!-- 服务时长，本单收入 first -->
				<view class="title">
					<view class="title-left">
						<view class="">
							<text>35</text>分钟
						</view>
						<view class="">
							服务时长
						</view>
					</view>
					<view class="title-right">
						<view class="">
							<text>2.0</text>元
						</view>
						<view class="">
							本单收入
						</view>
					</view>
				</view>
				<!-- 服务时长，本单收入 end -->
				<!-- 地址 fitst -->
				<view class="address">
					<view class="addressOne" v-if="flag">
						<view class="move">
							搬
						</view>
						<view class="address-right">
							<view class="">
								信阳师范大学1号教学楼
							</view>
							<view class="">
								张先生<text>15445434543</text>
							</view>
						</view>
					</view>
					<view class="addressTwo" v-else>
						<view class="main-main">
							<view class="">
								<steps></steps>
							</view>
							<view class="main-right">
								<view class="main-right-business">
									<view class="main-right-header">
										信阳师范大学1食堂二楼201
									</view>
									<view class="main-right-footer">
										<view class="">
											商家<text>15445434543</text>
										</view>
									</view>
								</view>
								<view class="main-right-user" v-if="item.status !== 3">
									<view class="main-right-header">
										信阳师范大学1宿舍楼301
									</view>
									<view class="main-right-footer">
										张三<text>19887656765</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 地址 end -->
			</view>
			<!-- 下部分 -->
			<view class="footer">
				<view class="information-item">
					<view class="information-item-left">
						订单编号
					</view>
					<view class="information-item-right">
						<view class="">
							12736748959700
						</view>
						<view class="copy" @click="copyOrderNo">
							复制
						</view>
					</view>
				</view>
				<!-- 下单人，取货人 -->
				<view class="information-item">
					<view class="information-item-left">
						下单人
					</view>
					<view class="information-item-right">
						<view class="">
							张（男士）
						</view>
					</view>
				</view>
				<view class="information-item">
					<view class="information-item-left">
						收货人
					</view>
					<view class="information-item-right">
						<view class="">
							张三（男士）
						</view>
					</view>
				</view>
				<view class="information-item">
					<view class="information-item-left">
						留言
					</view>
					<view class="information-item-right">
						<view class="">
							<view class="">
								物品信息留言及图片
							</view>
							<view class="information-item-right-image">
								<image src="https://photo.16pic.com/00/16/34/16pic_1634458_b.jpg" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="information-item">
					<view class="information-item-left">
						下单时长
					</view>
					<view class="information-item-right">
						<view class="">
							1小时
						</view>
					</view>
				</view>
				<view class="information-item">
					<view class="information-item-left">
						物品重量
					</view>
					<view class="information-item-right">
						<view class="">
							25kg以内
						</view>
					</view>
				</view>
				<view class="information-item">
					<view class="information-item-left">
						里程
					</view>
					<view class="information-item-right">
						<view class="">
							3km
						</view>
					</view>
				</view>
				<view class="information-item">
					<view class="information-item-left">
						收入明细
					</view>
					<view class="information-item-right">
						<view class="information-item-right-main">
							<view class="">
								基础费用<text>￥18.0</text>
							</view>
							<view class="">
								小费<text>￥2.0</text>
							</view>
						</view>
					</view>
				</view>
				<view class="information-item">
					<view class="information-item-left">
						合计收入
					</view>
					<view class="information-item-right">
						<view class="amountTo">
							￥40.0
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-button">
			<button>接单</button>
		</view>
	</view>
</template>

<script>
	import steps from '../components/package/steps/steps.vue'
	export default {
		components: {
			steps
		},
		data() {
			return {}
		},
		methods: {
			// 复制订单号
			copyOrderNo(){
				uni.setClipboardData({
					data: '123456789',
					success() {
						uni.showToast({
							title:'复制成功',
							icon:'success'
						})
					},
					fail(){
						uni.showToast({
							title: '复制失败',
							icon:'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.orderDetails {
		background: #F7F7F7;

		// 空
		.empty {
			height: 20rpx;
		}

		.main {
			width: 702rpx;
			// height: 1074rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 3rpx 8rpx 0rpx rgba(0, 0, 0, 0.14);
			border-radius: 20rpx;
			margin: auto;
			// padding-bottom: 42rpx;
			padding-bottom: 30rpx;

			.header {
				width: 640rpx;
				border-bottom: 1px solid #F2F2F2;
				margin: auto;

				// 服务时长，本单收入
				.title {
					display: flex;
					justify-content: space-around;
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					color: #383838;
					padding: 81rpx 0 65rpx 0;

					.title-left {
						view:first-child {
							font-size: 30rpx;

							text {
								font-size: 48rpx;
								font-weight: 500;
								color: #F14500;
							}
						}
					}

					.title-right {
						view:first-child {
							font-size: 30rpx;

							text {
								font-size: 48rpx;
								font-weight: 500;
								color: #F14500;
							}
						}
					}
				}

				// 搬小圆球
				.move {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 38rpx;
					height: 38rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					border-radius: 50%;
					background: #F14500;
					margin-right: 15rpx;
				}

				// 地址
				.address {

					// 单地址
					.addressOne {
						display: flex;
						align-items: center;
						padding-bottom: 33rpx;

						.address-right {
							view:first-child {
								font-size: 26rpx;
								font-weight: 500;
								color: #3A3A3A;
							}

							view:last-child {
								font-size: 24rpx;
								font-weight: 400;
								color: #979797;

								text {
									padding-left: 20rpx;
								}
							}
						}
					}

					// 双地址
					.addressTwo {
						.main-main {
							display: flex;
							border-bottom: 1px solid #F2F2F2;
							padding-bottom: 23rpx;

							// 运
							.move {
								display: flex;
								justify-content: center;
								align-items: center;
								width: 38rpx;
								height: 38rpx;
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 400;
								color: #FFFFFF;
								border-radius: 50%;
								background: #F14500;
								margin-right: 15rpx;
							}

							.main-right {

								// 商家地址，用户地址
								.main-right-header {
									font-size: 26rpx;
									font-weight: 500;
									color: #3A3A3A;
								}

								// 商家电话，用户电话
								.main-right-footer {
									height: 35rpx;
									font-size: 24rpx;
									font-weight: 400;
									color: #979797;

									text {
										padding-left: 20rpx;
									}
								}

								.main-right-user {
									padding-top: 38rpx;
								}
							}
						}
					}
				}
			}

			.footer {
				width: 640rpx;
				margin: auto;
				// padding-left: 20rpx;
				// padding-top: 33rpx;
				padding: 23rpx 0 0 20rpx;
				.information-item {
					display: flex;
					// align-items: center;
					padding: 10rpx 0;

					.information-item-left {
						// width: 94rpx;
						width: 150rpx;
						height: 23rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #858585;
					}

					.information-item-right {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						font-weight: 400;
						color: #353535;
						.information-item-right-image {
							padding-top: 16rpx;
							image {
								width: 136rpx;
								height: 122rpx;
								border-radius: 5rpx;
							}
						}
						// 复制
						.copy {
							display: flex;
							justify-content: center;
							align-items: center;
							width: 54rpx;
							height: 26rpx;
							border: 1px solid #353535;
							border-radius: 13rpx;
							font-size: 18rpx;
							font-weight: 400;
							color: #353535;
							margin-left: 24rpx;
						}

						.information-item-right-main {
							text {
								color: #F14500;
							}
						}

						// 合计
						.amountTo {
							font-size: 30rpx;
							font-weight: 500;
							color: #F14500;
						}
					}
				}
			}
		}

		// 
		.footer-button {
			// padding-top: 300rpx;
			padding-top: 100rpx;
			button {
				width: 684rpx;
				height: 80rpx;
				background: #F14500;
				border-radius: 40rpx;
				margin: auot;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>